<template>
  <div>
    <h1>
      全选: <input type="checkbox" />
      <button>反选</button>
      <ul>
        <!-- 2.  v-for -->
        <li v-for="item in list" :key="item.name">
          <!-- 3. v-model -->
          <input type="checkbox" v-model="item.checked" /> {{ item.name }}
        </li>
      </ul>
    </h1>
  </div>
</template>

<script>
/*
  学习目标：列表渲染
*/
export default {
  data() {
    return {
      // 1. 声明数组数组
      list: [
        { checked: true, name: "八戒" },
        { checked: false, name: "悟空" },
        { checked: false, name: "师父" },
        { checked: true, name: "沙师弟" },
      ],
    };
  },
};
</script>

<style></style>
